<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/assets/home/css/mui.min.css" />
    <link rel="stylesheet" href="/assets/home/css/animate.min.css" />
    <link rel="stylesheet" href="/assets/home/css/reset.css" />
    <link rel="stylesheet" href="/assets/home/css/ranking.css" />
    <link rel="stylesheet" href="/assets/home/css/comment_list.css" />
    <script src="/assets/home/js/jquery-1.9.1.min.js"></script>
    <script src="/assets/home/js/mui.min.js"></script>
    <script src="/assets/home/js/wow.min.js"></script>
    <title>评论列表</title>
</head>

<body>
    <div class="top wow">
        <img src="/assets/home/images/ranking_back.png" />
    </div>

    <div id="box">
        <!-- 评论内容 -->
        <ul class="mui-table-view list">
            {foreach $commentList as $key=>$comment}
            <li class="item mui-table-view-cell mui-media wow" data-wow-delay="100ms">
                <img class="mui-media-object mui-pull-left userimg" src="{$comment.business.avatar_text}">
                <div class="mui-media-body">
                    <div class="header">
                        <span class="nickname">{$comment.business.nickname}</span>
                        对
                        <a class="course" href="/home/course/details?id={$comment.subid}">{$comment.subject.title}</a>
                        评论：
                    </div>
                    <p>{$comment.content}</p>
                    <div class="rate">
                        {for start="1" end="$comment.rate+1"}
                        <span>
                            <img src="/assets/home/images/rate_active.png" alt="">
                        </span>
                        {/for}
                        {for start="$comment.rate" end="5"}
                        <span>
                            <img src="/assets/home/images/rate.png" alt="">
                        </span>
                        {/for}
                    </div>
                </div>
            </li>
            {/foreach}
        </ul>
    </div>
</body>

</html>
<script>
    new WOW({
        boxClass: 'wow',      // 需要执行动画的元素的 class(默认是wow)
        animateClass: 'animated fadeInDown', // animation.css 动画的 class(默认是animated)
        offset: 0,          // 距离可视区域多少开始执行动画(默认为0)
        mobile: true,       // 是否在移动设备上执行动画(默认为true)
        live: true,       // 异步加载的内容是否有效(默认为true)
        scrollContainer: '#box' // 可选滚动容器选择器，否则使用窗口
    }).init();
</script>